<template>
    <view class="container">
        <!-- 自定义顶部导航栏 -->
        <view class="custom-nav-bar nav-transparent">
            <view class="nav-left">
                <view class="back-button" @click="goBack">
                    <image src="../../static/home/right.png" class="back-icon" mode="widthFix" />
                </view>
                <image src="../../static/tab/logo.png" mode="widthFix" class="nav-bar-image logo-image" />
            </view>
            <view class="nav-right"></view>
        </view>
        
        <view class="search-header">
            <view class="search-container">
                <view @click="openSearchModal" class="search-input-box">
                    <view class="search-input-content">
                        <image class="search-icon" src="../../static/searchCourt/Group.png" mode="widthFix" />
                        <view class="search-text-container">
                            <text class="search-selected-text" v-if="selectedClubs.length > 1 || (selectedClubs.length === 1 && selectedClubs[0] !== 0)">
                                {{ getSelectedClubsText() }}
                            </text>
                            <text class="search-placeholder" v-else>搜索发球机馆</text>
                        </view>
                    </view>
                </view>
            </view>
            <view @click="performSearch" class="search-button" :class="{ 'loading': loading }">
                <image v-if="loading" class="loading-icon" src="../../static/home/loading.png" mode="widthFix"></image>
                <text v-if="!loading">查询</text>
                <text v-else>搜索中...</text>
            </view>
        </view>
        
        <view>
            <view v-if="!isVenueListExpanded" class="all-icon" @click="toggleVenueListExpansion">
                    <image src="../../static/home/right.png" class="expand-arrow" :class="{ expanded: isVenueListExpanded }" mode="widthFix" />
                   </view>
            <scroll-view 
                v-if="!isVenueListExpanded"
                scroll-x 
                class="scroll-view-container" 
                ref="venueScrollView"
            >
                <view style="display: flex;width: fit-content;">
                    <view 
                        class="court-type"
                        :class="{ active: activeVenueFilter === 'all' }"
                        @click="filterByVenue('all')"
                    >
                        全部
                    </view>
                    <view 
                        v-for="(venue, index) in uniqueVenues" 
                        :key="index"
                        class="court-type"
                        :class="{ active: activeVenueFilter === venue }"
                        @click="filterByVenue(venue)"
                    >
                        {{ getVenueDisplayName(venue) }}
                    </view>
                   
                </view>
            </scroll-view>
            
            <!-- 展开状态的球馆列表 -->
            <view class="expanded-venue-container" :class="{ show: isVenueListExpanded }">
                <view class="expanded-venue-header">
                    <text class="expanded-title">选择球馆</text>
                    <view class="all-icon" @click="toggleVenueListExpansion">
                        <image src="../../static/home/right.png" style="width: 36rpx; height: 36rpx;transform: rotate(270deg);" mode="widthFix" />
                    </view>
                </view>
                <view class="expanded-venue-grid">
                    <view 
                        class="expanded-court-type"
                        :class="{ active: activeVenueFilter === 'all' }"
                        @click="filterByVenue('all')"
                    >
                        全部
                    </view>
                    <view 
                         v-for="(venue, index) in uniqueVenues" 
                         :key="index"
                         class="expanded-court-type"
                         :class="{ active: activeVenueFilter === venue }"
                         @click="filterByVenue(venue)"
                     >
                         {{ getVenueDisplayName(venue) }}
                     </view>
                </view>
            </view>
        </view>
        <!-- 地图展示 -->
         <view>

         </view>
        <!-- 搜索结果展示 -->
        <view class="content">
            <scroll-view 
                class="venue-list" 
                :class="{ 'venue-list-expanded': isVenueListExpanded }"
                scroll-y
                ref="venueScrollView"
            >
                <view v-if="loading" class="loading-container">
                    <view class="loading-text">加载中...</view>
                </view>
                <view v-else-if="filteredVenueList.length === 0" class="empty-container">
                    <view class="empty-text">暂无发球机馆</view>
                </view>
                <view style="padding-bottom: 100rpx;" v-else>
                    <view 
                        v-for="(venue, index) in filteredVenueList" 
                        :key="index"
                        class="venue-item"
                        
                    >
                        <view class="venue-header">
                            <view class="venue-logo">
                                {{ venue.name.charAt(0) }}
                            </view>
                            <view class="venue-info">
                                <view class="venue-name">{{ venue.name }}</view>
                                <view class="venue-details">
                                    <view class="court-info-row">
                                        <text class="info-label">场地数量</text>
                                        <text class="court-count">{{ venue.courtSum }}台</text>
                                    </view>
                                    <view class="court-info-row">
                                        <text class="info-label">地址</text>
                                        <text class="venue-address">{{ getPrimaryAddress(venue).address }}</text>
                                    </view>
                                    <view class="court-info-row" style="width: 550rpx;border-radius: 24rpx;overflow: hidden;">
                                        <map
                                            :longitude="getPrimaryAddress(venue).longitude"
                                            :latitude="getPrimaryAddress(venue).latitude"
                                            :scale="15"
                                            :markers="[{
                                                id: venue.id,
                                                longitude: getPrimaryAddress(venue).longitude,
                                                latitude: getPrimaryAddress(venue).latitude,
                                                iconPath: '/static/court/court.png',
                                                width: 40,
                                                height: 40
                                            }]"
                                            @markertap="openNavigation(venue)"
                                        />
                                    </view>
                                    <view class="venue-actions">
                                        <view @click="openNavigation(venue)" class="venue-location">
                                            <image class="location-icon" src="../../static/home/导航.png" mode="widthFix" />
                                            <text class="distance-text">{{ getDistance(venue) }}</text>
                                        </view>
                                        <view @click="goToMiniProgram(venue.appId)" class="book-button" @click.stop="goToMiniProgram(venue.appId)">
                                            <image  class="book-icon" src="../../static/home/Subtract.png" mode="widthFix" />
                                            去订场
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 搜索模态框 -->
        <view class="modal-overlay" v-if="showModal" @click="closeSearchModal"></view>
        <view class="search-modal" :class="{ 'modal-show': showModal }">
            <view class="modal-header">
                <view class="header-left">
                    <text class="modal-title">筛选</text>
                </view>
                <view class="header-right">
                    <text class="modal-cancel" @click="closeSearchModal">取消</text>
                </view>
            </view>

            <view class="search-filters">
                <!-- 省市区筛选区域 -->
                <view class="location-filter-section">
                    <view class="location-filter-row">
                        <view class="location-filter-item">
                            <!-- <text class="filter-label">省</text> -->
                            <view class="filter-value" @click="showProvincePicker = true">{{ selectedProvince || '请选择' }}</view>
                        </view>
                        <view class="location-filter-item">
                            <!-- <text class="filter-label">市</text> -->
                            <view class="filter-value" @click="showCityPicker = true">{{ selectedCity || '请选择' }}</view>
                        </view>
                        <view class="location-filter-item">
                            <!-- <text class="filter-label">区</text> -->
                            <view class="filter-value" @click="showDistrictPicker = true">{{ selectedDistrict || '请选择' }}</view>
                        </view>
                    </view>
                </view>
                
                <view class="filter-item">
                    <view class="filter-label">选择球馆</view>
                    <view class="club-selector-container">
                        <view 
                            v-for="(club, index) in clubOptions" 
                            :key="index"
                            class="club-option"
                            :class="{ active: selectedClubs.includes(index) }"
                            @click="toggleClubSelection(index)"
                        >
                            {{ club }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="modal-actions">
                <view class="reset-btn" @click="resetFilters">重置</view>
                <view class="search-btn" :class="{ 'loading': loading }" @click="performSearch">
                    <image v-if="loading" class="loading-icon" src="../../static/home/loading.png" mode="widthFix"></image>
                    <text>{{ loading ? '搜索中...' : '查询' }}</text>
                </view>
            </view>
        </view>
        
        <!-- 省选择器 -->
        <view class="picker-mask" v-if="showProvincePicker" @click="showProvincePicker = false">
            <view class="picker-content" @click.stop>
                <view class="picker-header">
                    <text class="picker-title">选择省份</text>
                    <text class="picker-cancel" @click="showProvincePicker = false">取消</text>
                </view>
                <picker-view class="picker-view" :value="[provinceIndex]" @change="onProvinceChange">
                    <picker-view-column>
                        <view class="picker-item" v-for="(province, index) in provinces" :key="index">{{ province }}</view>
                    </picker-view-column>
                </picker-view>
                <view class="picker-footer">
                    <button class="picker-confirm" @click="confirmProvince">确定</button>
                </view>
            </view>
        </view>
        
        <!-- 市选择器 -->
        <view class="picker-mask" v-if="showCityPicker" @click="showCityPicker = false">
            <view class="picker-content" @click.stop>
                <view class="picker-header">
                    <text class="picker-title">选择城市</text>
                    <text class="picker-cancel" @click="showCityPicker = false">取消</text>
                </view>
                <picker-view class="picker-view" :value="[cityIndex]" @change="onCityChange">
                    <picker-view-column>
                        <view class="picker-item" v-for="(city, index) in cities" :key="index">{{ city }}</view>
                    </picker-view-column>
                </picker-view>
                <view class="picker-footer">
                    <button class="picker-confirm" @click="confirmCity">确定</button>
                </view>
            </view>
        </view>
        
        <!-- 区选择器 -->
        <view class="picker-mask" v-if="showDistrictPicker" @click="showDistrictPicker = false">
            <view class="picker-content" @click.stop>
                <view class="picker-header">
                    <text class="picker-title">选择区域</text>
                    <text class="picker-cancel" @click="showDistrictPicker = false">取消</text>
                </view>
                <picker-view class="picker-view" :value="[districtIndex]" @change="onDistrictChange">
                    <picker-view-column>
                        <view class="picker-item" v-for="(district, index) in districts" :key="index">{{ district }}</view>
                    </picker-view-column>
                </picker-view>
                <view class="picker-footer">
                    <button class="picker-confirm" @click="confirmDistrict">确定</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import smallVenueConfig from '../../common/smallVenueConfig.json';
import venueConfig from '../../common/venueConfig.json';

export default {
    data() {
        return {
            showModal: false,
            venueList: [],
            filteredVenueList: [],
            loading: false,
            clubOptions: ['所有球馆'],
            selectedClubs: [0], // 默认选中所有球馆
            uniqueVenues: [],
            activeVenueFilter: 'all',
            isVenueListExpanded: false,
            
            // 省市区筛选相关数据
            showProvincePicker: false,
            showCityPicker: false,
            showDistrictPicker: false,
            selectedProvince: '',
            selectedCity: '',
            selectedDistrict: '',
            provinceIndex: 0,
            cityIndex: 0,
            districtIndex: 0,
            provinces: [],
            cities: [],
            districts: [],
            allLocations: []
        }
    },
    onLoad() {
        this.initData();
        this.initLocations();
        // 监听从首页跳转过来的搜索事件
        uni.$on('openSearchModal', () => {
            this.openSearchModal();
        });
    },
    onUnload() {
        uni.$off('openSearchModal');
    },
    methods: {
        initData() {
            // 从配置文件加载数据
            this.venueList = smallVenueConfig.venues || [];
            this.filteredVenueList = [...this.venueList];
            
            // 初始化球馆选项
            this.clubOptions = ['所有球馆', ...this.venueList.map(venue => venue.name)];
            
            // 初始化唯一球馆列表
            this.uniqueVenues = this.venueList.map(venue => venue.name);
        },
        
        getVenueDisplayName(venue) {
            // 如果在配置中找不到，则去掉后缀返回
            return venue.replace(/网球|俱乐部|校区|公园|中心|店/g, '');
        },
        
        getPrimaryAddress(venue) {
            if (venue.addresses && venue.addresses.length > 0) {
                const primaryAddress = venue.addresses.find(addr => addr.isPrimary) || venue.addresses[0];
                return {
                    address: primaryAddress.address || '',
                    latitude: primaryAddress.latitude || 0,
                    longitude: primaryAddress.longitude || 0
                };
            }
            return {
                address: '',
                latitude: 0,
                longitude: 0
            };
        },
        
        getDistance(venue) {
            // 模拟距离数据
            const distances = ['1.2 km', '2.5 km', '3.8 km', '1.8 km', '4.2 km'];
            return distances[venue.id % distances.length] || '未知';
        },
        
        getSelectedClubsText() {
            if (this.selectedClubs.length === 1 && this.selectedClubs[0] === 0) {
                return '所有球馆';
            }
            const selectedNames = this.selectedClubs
                .filter(index => index !== 0)
                .map(index => this.clubOptions[index])
                .filter(name => name);
            
            if (selectedNames.length === 0) {
                return '所有球馆';
            } else if (selectedNames.length === 1) {
                return selectedNames[0];
            } else {
                return `${selectedNames[0]} 等${selectedNames.length}个球馆`;
            }
        },
        
        filterByVenue(venueName) {
            this.activeVenueFilter = venueName;
            this.isVenueListExpanded = false;
            
            if (venueName === 'all') {
                this.filteredVenueList = [...this.venueList];
            } else {
                this.filteredVenueList = this.venueList.filter(venue => venue.name === venueName);
            }
        },
        
        toggleVenueListExpansion() {
            this.isVenueListExpanded = !this.isVenueListExpanded;
        },
        
        openSearchModal() {
            this.showModal = true;
        },
        
        closeSearchModal() {
            this.showModal = false;
        },
        
        toggleClubSelection(index) {
            if (index === 0) {
                // 选择"所有球馆"
                this.selectedClubs = [0];
            } else {
                // 选择具体球馆
                const currentIndex = this.selectedClubs.indexOf(index);
                if (currentIndex > -1) {
                    // 取消选择
                    this.selectedClubs.splice(currentIndex, 1);
                    // 如果没有选中任何球馆，默认选择"所有球馆"
                    if (this.selectedClubs.length === 0) {
                        this.selectedClubs = [0];
                    }
                } else {
                    // 添加选择
                    // 如果之前选择的是"所有球馆"，先移除它
                    const allIndex = this.selectedClubs.indexOf(0);
                    if (allIndex > -1) {
                        this.selectedClubs.splice(allIndex, 1);
                    }
                    this.selectedClubs.push(index);
                }
            }
        },
        
        resetFilters() {
            this.selectedClubs = [0];
            // 重置省市区选择为默认值
            this.selectedProvince = '广东省';
            this.selectedCity = '东莞市';
            this.selectedDistrict = '所有';
            this.provinceIndex = this.provinces.indexOf('广东省') >= 0 ? this.provinces.indexOf('广东省') : 0;
            this.cityIndex = this.cities.indexOf('东莞市') >= 0 ? this.cities.indexOf('东莞市') : 0;
            this.districtIndex = 0;
            
            // 更新城市和区域选项
            this.updateCities();
            this.updateDistricts();
            // 更新球馆选项
            this.updateClubOptions();
        },
        
        performSearch() {
            this.loading = true;
            this.closeSearchModal();
            
            setTimeout(() => {
                if (this.selectedClubs.includes(0)) {
                    // 显示所有球馆
                    this.filteredVenueList = [...this.venueList];
                } else {
                    // 根据选择的球馆过滤
                    const selectedVenueNames = this.selectedClubs
                        .map(index => this.clubOptions[index])
                        .filter(name => name && name !== '所有球馆');
                    
                    this.filteredVenueList = this.venueList.filter(venue => 
                        selectedVenueNames.includes(venue.name)
                    );
                }
                
                this.loading = false;
            }, 500);
        },
        
        goToMiniProgram(appId) {
            if (appId) {
                uni.navigateToMiniProgram({
                    appId: appId,
                    success: function(res) {
                        console.log('跳转小程序成功');
                    },
                    fail: function(err) {
                        console.error('跳转小程序失败:', err);
                    
                    }
                });
            } else {
                uni.showToast({
                    title: '该场馆暂不支持小程序跳转',
                    icon: 'none'
                });
            }
        },
        
        openNavigation(venue) {
            const primaryAddress = this.getPrimaryAddress(venue);
            if (primaryAddress.latitude && primaryAddress.longitude) {
                uni.openLocation({
                    latitude: primaryAddress.latitude,
                    longitude: primaryAddress.longitude,
                    name: venue.name,
                    address: primaryAddress.address,
                    success: function() {
                        console.log('打开导航成功');
                    },
                    fail: function(err) {
                        console.error('打开导航失败', err);
                        uni.showToast({
                            title: '导航功能暂不可用',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '场馆位置信息不完整',
                    icon: 'none'
                });
            }
        },
        
        goBack() {
            uni.navigateBack();
        },
        
        // 省市区选择相关方法
        onProvinceChange(e) {
            this.provinceIndex = e.detail.value[0];
        },
        
        onCityChange(e) {
            this.cityIndex = e.detail.value[0];
        },
        
        onDistrictChange(e) {
            this.districtIndex = e.detail.value[0];
        },
        
        confirmProvince() {
            this.selectedProvince = this.provinces[this.provinceIndex];
            this.showProvincePicker = false;
            // 重置市和区的选择
            this.selectedCity = '';
            this.selectedDistrict = '所有';
            this.cityIndex = 0;
            this.districtIndex = 0;
            // 更新市和区的选项
            this.updateCities();
            this.updateDistricts();
            // 更新球馆选项
            this.updateClubOptions();
        },
        
        confirmCity() {
            this.selectedCity = this.cities[this.cityIndex];
            this.showCityPicker = false;
            // 重置区的选择
            this.selectedDistrict = '所有';
            this.districtIndex = 0;
            // 更新区的选项
            this.updateDistricts();
            // 更新球馆选项
            this.updateClubOptions();
        },
        
        confirmDistrict() {
            this.selectedDistrict = this.districts[this.districtIndex];
            this.showDistrictPicker = false;
            
            // 更新球馆选项
            this.updateClubOptions();
            
            // 选择完镇区后，默认选中所有球馆
            this.selectedClubs = [0];
        },
        
        updateCities() {
            if (this.selectedProvince) {
                // 获取所选省份的所有城市
                const citiesInProvince = this.allLocations
                    .filter(location => location.province === this.selectedProvince)
                    .map(location => location.city);
                this.cities = [...new Set(citiesInProvince)];
            } else {
                // 如果没有选择省份，显示所有城市
                const allCities = this.allLocations.map(location => location.city);
                this.cities = [...new Set(allCities)];
            }
            this.cityIndex = 0;
        },
        
        updateDistricts() {
            if (this.selectedProvince && this.selectedCity) {
                // 获取所选省份和城市的所有区域
                const districtsInCity = this.allLocations
                    .filter(location => location.province === this.selectedProvince && location.city === this.selectedCity)
                    .map(location => location.district);
                this.districts = ['所有', ...new Set(districtsInCity)];
            } else if (this.selectedProvince) {
                // 如果只选择了省份，显示该省份的所有区域
                const districtsInProvince = this.allLocations
                    .filter(location => location.province === this.selectedProvince)
                    .map(location => location.district);
                this.districts = ['所有', ...new Set(districtsInProvince)];
            } else {
                // 如果没有选择省份和城市，显示所有区域
                const allDistricts = this.allLocations.map(location => location.district);
                this.districts = ['所有', ...new Set(allDistricts)];
            }
            this.districtIndex = 0;
        },
        
        initLocations() {
            // 从smallVenueConfig中提取所有省市区信息
            const locations = [];
            smallVenueConfig.venues.forEach(venue => {
                venue.addresses.forEach(address => {
                    locations.push({
                        venueName: venue.name,
                        province: address.province,
                        city: address.city,
                        district: address.district
                    });
                });
            });
            this.allLocations = locations;
            
            // 提取所有唯一的省份
            const allProvinces = locations.map(location => location.province);
            this.provinces = [...new Set(allProvinces)];
            
            // 设置默认省份为广东省
            this.selectedProvince = '广东省';
            const provinceIndex = this.provinces.indexOf('广东省');
            this.provinceIndex = provinceIndex >= 0 ? provinceIndex : 0;
            
            // 初始化城市选项
            const allCities = locations.map(location => location.city);
            this.cities = [...new Set(allCities)];
            
            // 设置默认城市为东莞市
            this.selectedCity = '东莞市';
            const cityIndex = this.cities.indexOf('东莞市');
            this.cityIndex = cityIndex >= 0 ? cityIndex : 0;
            
            // 初始化区域选项，添加"所有"选项
            const allDistricts = locations.map(location => location.district);
            this.districts = ['所有', ...new Set(allDistricts)];
            this.selectedDistrict = '所有';
            this.districtIndex = 0;
            
            // 更新城市和区域选项
            this.updateCities();
            this.updateDistricts();
            // 更新球馆选项
            this.updateClubOptions();
        },
        
        updateClubOptions() {
            // 根据选择的省市区过滤球馆选项
            let filteredVenues = this.allLocations;
            
            // 根据省份过滤
            if (this.selectedProvince) {
                filteredVenues = filteredVenues.filter(location => location.province === this.selectedProvince);
            }
            
            // 根据城市过滤
            if (this.selectedCity) {
                filteredVenues = filteredVenues.filter(location => location.city === this.selectedCity);
            }
            
            // 根据区域过滤
            if (this.selectedDistrict && this.selectedDistrict !== '所有') {
                filteredVenues = filteredVenues.filter(location => location.district === this.selectedDistrict);
            }
            
            // 获取符合条件的球馆名称
            const filteredVenueNames = [...new Set(filteredVenues.map(location => location.venueName))];
            
            // 更新球馆选项
            this.clubOptions = ['所有球馆', ...filteredVenueNames];
            
            // 更新uniqueVenues数组
            this.uniqueVenues = filteredVenueNames;
            
            // 重置选择为所有球馆
            this.selectedClubs = [0];
            
            // 同时更新过滤后的场馆列表
            this.filteredVenueList = this.venueList.filter(venue => 
                filteredVenueNames.includes(venue.name)
            );
        }
    }
};
</script>

<style lang="scss">
.container {
    position: relative;
    background-color: #fff;
}
// 导航栏样式
.custom-nav-bar {
   display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 88rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding-top: env(safe-area-inset-top);
    
    &.nav-transparent {
        background-color: transparent;
    }
}

.nav-left {
    display: flex;
    align-items: center;
}

.back-button {
   width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 30rpx;
}

.back-icon {
    width: 36rpx;
    height: 36rpx;
    transform: rotate(180deg);
}

.nav-bar-image {
    &.logo-image {
        width: 270rpx;
        height: 68rpx;
    }
}

.nav-right {
    width: 60rpx;
}

// 搜索头部样式
.search-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    gap: 20rpx;
    margin-top: 200rpx;
}

.search-container {
    flex: 1;
}

.search-input-box {
    background: #F7F7F7;
    border-radius: 24rpx;
    padding: 0 30rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
}

.search-input-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
}

.search-text-container {
    flex: 1;
}

.search-selected-text {
    color: #333;
    font-size: 28rpx;
}

.search-placeholder {
    color: #999;
    font-size: 28rpx;
}

.search-button {
    width: fit-content;
    padding: 0 30rpx;
    height: 80rpx;
    background: #42CF7F;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28rpx;
    transition: all 0.3s ease;
    
    &.loading {
        background-color: #95E5B8;
        cursor: not-allowed;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.loading-icon {
    width: 32rpx;
    height: 32rpx;
    animation: spin 1s linear infinite;
    margin-right: 10rpx;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

// 球馆导航样式
.scroll-view-container {
    width: 720rpx;
    overflow-x: scroll;
    padding-left: 30rpx;
    display: flex;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
    .court-type {
        margin-right: 44rpx;
        font-size: 32rpx;
        color: #999;
        width: max-content;
        font-weight: bold;
        position: relative;
        z-index: 0;
    }

    .court-type.active {
        color: #333;
    }
    .active::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: -webkit-fill-available;
        height: 21rpx;
        background-color: #42CF7F8F;
        border-radius: 3rpx;
        z-index: -1;
    }
}

.all-icon{
    width: 74rpx;
    height: 47rpx;
    position: absolute;
    right: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 10rpx;
    z-index: 1;
    image{
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }
}

.expand-arrow {
    width: 36rpx;
    height: 36rpx;
    transform: rotate(90deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

// 展开的球馆列表样式
.expanded-venue-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
    margin: 0 30rpx 20rpx;
    border-radius: 24rpx;
    .all-icon{
            display: none !important;
        }
    &.show {
        max-height: 2500rpx;
        .all-icon{
            display: flex !important;
        }
    }
}

.expanded-venue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
}

.expanded-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.expanded-venue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 20rpx;
}

.expanded-court-type {
    padding: 20rpx;
    text-align: center;
    font-size: 28rpx;
    color: #999;
    background-color: #f7f7f7;
    border-radius: 24rpx;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}

.expanded-court-type.active {
    color: #42CF7F;
    background-color: rgba(66, 207, 127, 0.1);
    border: 1rpx solid #42CF7F;
}

.expanded-court-type:hover {
    background-color: #e8e8e8;
}

.expanded-court-type.active:hover {
    background-color: rgba(66, 207, 127, 0.15);
}

// 内容区域样式
.content {
    // padding: 0 30rpx;
}

.venue-list {
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    height: calc(100vh - 194rpx - 200rpx);
    box-sizing: border-box;
}

.venue-list-expanded {
    height: calc(100vh - 194rpx - 300rpx) !important;
}

.loading-container, .empty-container {
    padding: 100rpx 0;
    text-align: center;
}

.loading-text, .empty-text {
    color: #999;
    font-size: 28rpx;
}

.venue-item {
    padding: 0 20rpx;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    
    &:last-child {
        border-bottom: none;
    }
}

.venue-header {
    display: flex;
}

.venue-logo {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 24rpx;
    margin-right: 20rpx;
    background: linear-gradient(180deg, #D6FF7D 0%, #42CF7F 100%);
    color: #333;
}

.venue-info {
    flex: 1;
}

.venue-name {
    font-size: 34rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: bold;
}

.venue-details {
    background: #F4F5F7;
    border-radius: 24rpx;
    padding: 30rpx;
}

.court-info-row {
    display: flex;
    margin-bottom: 15rpx;
    align-items: center;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.info-label {
    font-size: 24rpx;
    color: #999;
    margin-right: 20rpx;
    // min-width: 120rpx;
}

.court-count {
    font-size: 24rpx;
    color: #42CF7F;
    font-weight: 500;
    padding: 8rpx 16rpx;
    background: #fff;
    border-radius: 16rpx;
}

.venue-address {
    font-size: 24rpx;
    color: #666;
    flex: 1;
    line-height: 1.4;
}

.venue-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}

.venue-location {
    display: flex;
    align-items: center;
}

.location-icon {
    width: 42rpx;
    height: 42rpx;
    margin-right: 20rpx;
}

.distance-text {
    font-size: 24rpx;
    color: #666;
}

.book-button {
    display: flex;
    width: 163rpx;
    height: 56rpx;
    border-radius: 448px;
    background: #42CF7F;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #fff;
}

.book-icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 20rpx;
}

// 模态框样式
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.search-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    max-height: 80vh;
    
    &.modal-show {
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
}

.header-left {
    display: flex;
    align-items: center;
}

.modal-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.modal-cancel {
    color: #999;
    font-size: 28rpx;
}

.search-filters {
    padding: 30rpx;
    max-height: 50vh;
    overflow-y: auto;
}

.filter-item {
    margin-bottom: 40rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.filter-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 500;
}

.club-selector-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.club-option {
    padding: 20rpx 30rpx;
    background: #F7F7F7;
    border-radius: 24rpx;
    color: #666;
    font-size: 26rpx;
    transition: all 0.3s ease;
    
    &.active {
        background: #42CF7F;
        color: #fff;
    }
}

.modal-actions {
    display: flex;
    padding: 30rpx;
    gap: 20rpx;
    border-top: 1rpx solid #eee;
}

.reset-btn {
    flex: 0.5;
    height: 100rpx;
    background-color: #f7f7f7;
    color: #666;
    border-radius: 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-btn {
    flex: 1;
    height: 100rpx;
    background-color: #42CF7F;
    color: white;
    border-radius: 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    
    &.loading {
        background-color: #95E5B8;
        cursor: not-allowed;
    }
}

/* 省市区筛选样式 */
.location-filter-section {
    margin-bottom: 40rpx;
}

.location-filter-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
}

.location-filter-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.location-filter-item .filter-label {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
}

.filter-value {
    padding: 20rpx;
    background: #f5f5f5;
    border-radius: 24rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border: 2rpx solid transparent;
    transition: all 0.3s ease;
}

.filter-value:active {
    background: #e0e0e0;
    border-color: #007aff;
}

/* 选择器弹窗样式 */
.picker-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
}

.picker-content {
    width: 100%;
    background: white;
    border-radius: 20rpx 20rpx 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    animation: slideUp 0.3s ease-out forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
}

.picker-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.picker-cancel {
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 20rpx;
}

.picker-view {
    height: 400rpx;
    width: 100%;
}

.picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    font-size: 28rpx;
    color: #333;
}

.picker-footer {
    padding: 30rpx;
    border-top: 1rpx solid #eee;
}

.picker-confirm {
    width: 100%;
    height: 100rpx;
    background-color: #42CF7F;
    color: white;
    border: none;
    border-radius: 24rpx;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.picker-confirm:active {
    background-color: #95E5B8;
}
</style>